<template>
  <div class="item-form">
    <div class="title width25">
      {{ title }}<span :class="pass ? 'mustPass' : 'noMustPass'">*</span>
      <div v-show="subtract" class="add-btn" @click="addItem">+</div>
    </div>
    <el-form-item class="item-clear" label="" :prop="value">
      <slot />
    </el-form-item>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  title: {
    type: String,
    default: () => {
      return ''
    }
  },
  pass: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  value: {
    type: String,
    default: () => {
      return ''
    }
  },
  subtract: {
    type: Boolean,
    default: () => {
      return false
    }
  }
})

const emit = defineEmits(['addItem'])
// 新增
const addItem = () => {
  emit('addItem')
}
</script>

<style lang="scss" scoped>
.width25 {
  min-width: 25%;
  user-select: none; //禁止被用户选中
}
.add-btn {
  position: absolute;
  bottom: 5px;
  left: 22%;
  z-index: 100;
}
.reduce-btn {
  position: absolute;
  bottom: 5px;
  right: 2px;
  z-index: 100;
}
// 基础表单框架盒子(优化)
.item-form {
  height: auto;
  text-align: center;
  display: flex;
  border: 1px solid var(--el-border-color-lighter);
  margin-bottom: -1px;
  align-items: center;
  position: relative;
  .title {
    font-weight: 550;
    font-size: 17px;
  }
  .item-clear {
    width: 75%;
    min-height: 50px;
    font-weight: 550;
    font-size: 17px;
    border-left: 1px solid var(--el-border-color-lighter);
    text-align: left;
    margin: 0;
    padding-left: 10px;
    padding-bottom: 15px;
    padding-top: 7px;
    .el-form-item__error {
      z-index: 100;
      background: none;
      font-size: 11px;
    }
  }
}
</style>
